<template>
  <div class="tab_home" style="background: #ffffff">
    <!-- 通知和搜索 -->
    <div>
      <div class="van-search" style="background: #dddddd">
        <img :src="newlogo" alt="" style="width: 23%; height: 1.3rem" />
        <div
          class="van-search__content van-search__content--round"
          @click="$router.push({ name: 'search' })"
        >
          <div class="van-cell van-cell--borderless van-field">
            <div class="van-field__left-icon">
              <i
                class="van-icon van-icon-search"
                style="height: 1.1rem; color: #686869"
              ></i>
            </div>
            <div class="van-cell__value van-cell__value--alone">
              <div class="van-field__body">
                <input
                  type="search"
                  placeholder="请输入产品名称"
                  class="van-field__control"
                />
              </div>
            </div>
          </div>
        </div>
        <span @click="redirectTo('/order')" style="margin-left: 2%">
          &nbsp;
          <!-- <van-icon name="cart" size="22" color="#1d5ae8" /> -->
        </span>
      </div>
    </div>
    <!-- in shopInfos.choicenessList -->
    <!-- banner  暂定高230  宽100% -->
    <van-swipe :autoplay="3000" indicator-color="white" class="banner">
      <van-swipe-item
        v-for="(banner, index) in shopInfos.bannerList"
        :key="index"
      >
        <div class="topback"></div>
        <div class="bottomback"></div>
        <img :src="banner.url" @click="redirectTo(banner.link)" />
      </van-swipe-item>
    </van-swipe>

    <!-- 行业咨询动态 -->
    <article ref="bigox" style="margin: auto">
      <van-row class="titall" style="margin-top: 11px">
        <img :src="tabtitle[0]" alt="" style="width: 100%" />
      </van-row>

      <ul
        style="
          display: flex;
          background: #ffffff;
          justify-content: space-between;
          flex-wrap: wrap;
          padding: 0 10px;
        "
      >
        <li
          v-for="(item, index) in consulting"
          :key="index"
          @click="redirectTo(item.officialUrl)"
          style="
            width: 48.5%;
            display: flex;
            margin-top: 10px;
            border-radius: 8px;
            justify-content: space-between;
          "
        >
          <img :src="item.image" alt="" style="width: 100%" />
        </li>
        <li style="width: 100%"></li>
      </ul>
    </article>

    <p @click="$router.push({ path: '/items/purchaselist' })">临时按钮</p>
    <!-- <p @click="newhomely()">临时按钮</p> -->
    <!-- 开始 -->
    <article ref="bigox" style="margin: auto">
      <van-row class="titall" style="padding-top: 10px">
        <img :src="tabtitle[1]" alt="" style="width: 100%" />
        <!-- <van-col style="background: #ffffff; width: 100%; padding: 7px 0">
        </van-col> -->
      </van-row>

      <ul
        style="
          display: flex;
          background: #ffffff;
          justify-content: space-between;
          flex-wrap: wrap;
          padding: 0 10px;
        "
      >
        <li
          v-for="(item, index) in newhome"
          :key="index"
          @click="redirectTo(item.officialUrl)"
          style="
            width: 48.5%;
            display: flex;
            margin-top: 10px;
            border-radius: 8px;
            justify-content: space-between;
          "
        >
          <img :src="item.image" alt="" style="width: 100%" />
        </li>
        <li style="width: 100%"></li>
      </ul>
    </article>

    <!-- 定位按钮 -->
    <!-- <div style="">
      <p
        v-for="(item, index) in longx.slice(0, 1)"
        :key="index"
        style="width: 100%; margin: 5px auto"
      >
        <img :src="item.image" alt="" style="width: 100%" />
      </p>
      <ul style="width: 100%; display: flex; flex-wrap: wrap; padding: 0 10px">
        <li
          v-for="(item, index) in longx.slice(1, longx.length)"
          :key="index"
          style="width: 24%; margin-top: 2px"
          :style="index % 4 != 0 ? 'margin-left:1%' : null"
          @click="$router.push({ path: item.officialUrl })"
        >
          <img :src="item.image" alt="" style="width: 100%" />
        </li>
      </ul>
    </div> -->
    <!-- 行业咨询动态 -->
    <article ref="bigox" style="margin: auto">
      <van-row class="titall" style="margin-top: 10px">
        <img :src="tabtitle[2]" alt="" style="width: 100%" />
        <!-- <van-col style="background: #ffffff; width: 100%; padding: 15px 0">
          <span
            style="
              padding: 5px 15px;
              background: #45b6f3;
              color: #ffffff;
              text-align: center;
              border-top-right-radius: 50px;
              border-bottom-right-radius: 50px;
              font-size: 16px;
            "
          >
            涂装行业产品
          </span>
        </van-col> -->
      </van-row>

      <ul
        style="
          display: flex;
          background: #ffffff;
          justify-content: space-between;
          flex-wrap: wrap;
          padding: 10px 10px;
        "
      >
        <li style="width: 100%">
          <div class="function">
            <van-row style="">
              <van-col
                span="6"
                @click="domain(vlu.officialUrl)"
                :style="ind % 4 == 0 && ind != 0 ? 'margin-top:15px' : null"
                v-for="(vlu, ind) in painting"
                :key="ind"
              >
                <div>
                  <van-icon style :name="vlu.image" size="60" />
                  <br />
                  <span>{{ vlu.name }}</span>
                </div>
              </van-col>
            </van-row>
          </div>
        </li>
      </ul>
    </article>

    <!-- 喷喷涂涂网互动 -->

    <article ref="bigox" style="margin: auto">
      <van-row class="titall" style="margin-bottom: 1px">
        <img :src="tabtitle[3]" alt="" style="width: 100%" />
        <!-- <van-col style="background: #ffffff; width: 100%; padding: 15px 0">
          <span
            style="
              padding: 5px 15px;
              background: #45b6f3;
              color: #ffffff;
              text-align: center;
              border-top-right-radius: 50px;
              border-bottom-right-radius: 50px;
              font-size: 16px;
            "
          >
            喷喷涂涂网互动
          </span>
        </van-col> -->
      </van-row>

      <ul
        style="
          display: flex;
          background: #ffffff;
          justify-content: space-between;
          flex-wrap: wrap;
          padding: 0 10px;
        "
      >
        <li style="width: 100%">
          <div class="function">
            <van-row style="">
              <van-col
                span="6"
                @click="domain(vlu.officialUrl)"
                :style="ind % 4 == 0 && ind != 0 ? 'margin-top:15px' : null"
                v-for="(vlu, ind) in interaction"
                :key="ind"
              >
                <div>
                  <van-icon style :name="vlu.image" size="70" />
                  <br />
                  <span>{{ vlu.name }}</span>
                </div>
              </van-col>
            </van-row>
          </div>
        </li>
      </ul>
    </article>
    <!-- 直播 -->
    <article ref="bigox" style="margin: auto">
      <van-row class="titall" style="margin-top: 10px">
        <img :src="tabtitle[4]" alt="" style="width: 100%" />
        <!-- <van-col style="background: #ffffff; width: 100%; padding: 15px 0">
          <span
            style="
              padding: 5px 45px;
              background: #45b6f3;
              color: #ffffff;
              text-align: center;
              border-top-right-radius: 50px;
              border-bottom-right-radius: 50px;
              font-size: 16px;
            "
          >
            直播
          </span>
        </van-col> -->
      </van-row>

      <ul
        style="
          display: flex;
          background: #ffffff;
          justify-content: space-between;
          flex-wrap: wrap;
          padding: 11px 10px;
        "
      >
        <li style="width: 100%">
          <div
            v-for="(vle, index) in broadcast"
            :key="index"
            :style="index != 0 ? 'margin-top:10px' : null"
          >
            <img
              :src="vle.image"
              alt=""
              style="width: 100%"
              @click="domain(vle.officialUrl)"
            />
          </div>
        </li>
      </ul>
    </article>
  </div>
</template>

<script>
import {
  getHome,
  goodsCategory,
  adList,
  listUsed,
  listRent,
  listTeam,
  listProject,
  dicItems,
  gethomebuton,
  voildteHasWatched,
  topicDetail,
  adListMap,
  funconstru,
  getContractDicItem,
  authInfo,
  getOrderSign,
  storery,
} from '@/api/api';
import scrollFixed from '@/mixin/scroll-fixed';
import firstpiu from '@/assets/images/firstpiu.png';
import { getLocalStorage, removeLocalStorage } from '@/utils/local-storage';
import pensoli from '@/assets/images/project.png';
import Realname from '@/assets/images/certificate.png';
import newlogo from '@/assets/images/newlogo.png';
import wanshifu from '@/assets/images/wanshifu.png';
import medal from '@/assets/images/medal.png';
import lease from '@/assets/images/lease.png';
import factory_outlet_tag from '@/assets/images/factory_outlet.png';
import logo_default from '@/assets/images/logo.jpg';
import hot_tag from '@/assets/images/hot.png';
import bottom_tag from '@/assets/images/bottom_tag.png';
import sellwellsidePng from '@/assets/images/index_sellwellside.png';
import takejob from '@/assets/images/takejob.png';

import {
  List,
  Swipe,
  SwipeItem,
  Tabbar,
  TabbarItem,
  Image,
  Search,
  Toast,
  Card,
  Row,
  Col,
  Tag,
  Tab,
  Tabs,
  Divider,
  Panel,
  Grid,
  GridItem,
  SidebarItem,
  Dialog,
  Sidebar,
} from 'vant';
import hand_transfer from '@/assets/images/hand_transfer.png';
import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
import wdfw from '@/assets/images/wdfw.png';
import geren from '@/assets/images/homefrist/geren.jpg';
import gongcehng from '@/assets/images/homefrist/gongcehng.jpg';
import mendian from '@/assets/images/homefrist/mendian.jpg';
import shigong from '@/assets/images/homefrist/shigong.jpg';
import shopdd from '@/assets/images/homefrist/shopdd.jpg';
import vipzun from '@/assets/images/homefrist/vipzun.jpg';

import zushou from '@/assets/images/homefrist/zushou.jpg';
import wx from 'weixin-js-sdk';

export default {
  mixins: [scrollFixed],

  data() {
    return {
      broadcast: '',
      bei: [
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/a8b9myfv9aaff9vdi8ey.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/mqes4omo1web8pbr9kfg.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/gsxkzucq38dye53ktj02.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/nw6bfr5f2j0eg1frveko.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/1fsyv5k37nl0sh5t3c07.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/2ebsg1lfh8hoc0pht53w.jpg',
      ],
      setou: new Map(),
      hand_transfer: hand_transfer,
      firstpiu: firstpiu,
      wdfw: wdfw,
      wanshifu: wanshifu,
      newlogo: newlogo,
      pensoli: pensoli,
      takejob: takejob,
      lease: lease,
      medal: medal,

      newhome: '',
      listHand: {
        listPages: null,
        secondList: [],
        listPage: 0,
      },
      titleClass: '',
      indexSideBar: 0,
      imgShow: true,
      textShow: false,
      categoryDataList: [],
      userId: getLocalStorage('userId').userId,
      activeKey: 0,
      merchantsUrl: '',

      workTeam: {
        pages: null,
        data: {},
        page: 0,
      },
      rent: {
        rentPages: null,
        rentList: [],
        rentPage: 0,
      },
      Realname: Realname,
      rentChange: {
        rentChangePages: null,
        rentChangeList: [],
        rentPage: 0,
      },
      video: {
        videoLimit: 2,
        videoList: [],
        videoPage: 0,
        videoPages: null,
      },
      hot_tag: hot_tag,
      bottom_tag: bottom_tag,
      navActive: 0,
      logo_default: logo_default,
      sellwellside: sellwellsidePng,
      shopInfos: [],
      bannerList: [],
      loading: false,
      finished: true,
      isLoading: false,
      cartInfo: 0,
      propsPopup: false,
      product_center: {},
      activities_center: {},
      warmSpringGif: '',
      warmSpringLink: '',
      factory_outlet_tag: factory_outlet_tag,
      membersPng: vipzun,
      leasePng:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/ki0al24ea8b1ffztemx7.png',
      materialPng:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/630yazvs2oua28nkeqiy.png',
      projectPng: gongcehng,
      serverPng:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/0uwztt1nvgxs3ta0kxbr.png',
      shopPng: mendian,
      usedPng: zushou,
      shopmal: shopdd,
      usercenterPng: geren,
      workteamPng: shigong,
      pay_closePng:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/l0q7lct79oar8r725jq3.jpg',
      pay_openPng:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/xivrsltghyg7ykxik3dl.gif',
      sellwell: '',
      sellwellleft: '',
      sellwellleftLink: '',
      sellwellright: '',
      sellwellrightLink: '',
      sellwellmiddle:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/4993iet8fo177y6rd1l8.gif',
      sellwellmiddleLink: '',
      newLevelId: 'USED.PUBLISH.NEW.LEVEL',
      leveloptions: [],
      usedLinkOne: '',
      usedPriceOne: '',
      usedSrcPriceOne: '',
      usedImgOne: '',
      usedLinkTwo: '',
      usedPriceTwo: '',
      usedSrcPriceTwo: '',
      usedImgTwo: '',
      usedLinkThree: '',
      usedPriceThree: '',
      usedSrcPriceThree: '',
      usedImgThree: '',
      rentLinkOne: '',
      rentImgOne: '',
      rentLinkTwo: '',
      painting: '',
      rentImgTwo: '',
      workTeamLinkOne: '',
      workTeamImgOne: '',
      workTeamLinkTwo: '',
      workTeamImgTwo: '',
      projectLinkOne: '',
      projectImgOne: '',
      projectLinkTwo: '',
      projectImgTwo: '',
      newGoodsLinkOne: '',
      newGoodsImgOne: '',
      newGoodsLinkTwo: '',
      newGoodsImgTwo: '',
      hotGoodsLinkOne: '',
      hotGoodsImgOne: '',
      interaction: '',
      hotGoodsLinkTwo: '',
      hotGoodsImgTwo: '',
      //是否存在开播房间
      isHavePlaying: false,
      //定时器
      Interval: undefined,
      consulting: [],
      lists: [],
      mobile: '',
      userInfo: '',
      listrend: [],
      projectlister: [],
      workerlist: [],
      ageMap: new Map(),
      workMap: new Map(),
      isiphoe: false,
      listent: [],
      longx: '',
      tabtitle: [],
    };
  },

  created() {
    removeLocalStorage('getskill', 'taskDivideId', 'valuetwo');

    // this.getCurrentPosition();
    //获取商品所有渲染数据

    this.initViews();
    // this.initNewLevelOption();

    // this.getRentList();
    this.getMerchantsUrl();

    this.gethomebtn();

    authInfo({}).then((res) => {
      this.userInfo = res.data.data.memberLevel;
      this.mobile = res.data.data.mobile;
    });
  },
  /**
   * 监听路由是否从会员开通状态页面过来的
   */
  watch: {
    $route(to, from) {
      let regexp = new RegExp('/order/payment-vip/');
      if (regexp.test(from.path)) {
        window.location.reload();
      }
    },
  },
  methods: {
    // 定位 备用
    // getCurrentPosition() {
    //   if (navigator.geolocation) {
    //     navigator.geolocation.getCurrentPosition(
    //       this.showPosition,
    //       this.errorPosition
    //     );
    //   } else {
    //     this.errorPositionTxt = '不支持获取用户当前位置';
    //     console.log('不支持获取用户当前位置');
    //   }
    // },
    // showPosition(position) {
    //   console.log(position.coords.latitude, position.coords.longitude);
    // },
    // errorPosition(error) {
    //   console.log(error, '111');
    // },

    domain(link) {
      if (link.indexOf('weixin') != -1) {
        window.location.href = link;
        return;
      }
      this.$router.push({ path: link });
    },
    // newhomely() {
    //   window.location.href =
    //     'https://www.xintu361.com/gocheng/#/items/purchaselist';
    // },

    // 判定是否是金牌会员
    btnrou(link) {
      if (link.indexOf('weixin') != -1) {
        window.location.href = link;
        return;
      }
      if (link == '/store/apply') {
        if (this.mobile == '' || this.mobile == undefined) {
          Dialog.confirm({
            title: '系统提示',
            message: '请先登录',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          })
            .then(() => {
              this.$router.push({ path: '/check' });
            })
            .catch(() => {});
          return;
        }
      }

      if (link == '/user/feedback') {
        if (this.mobile == '' || this.mobile == undefined) {
          Dialog.confirm({
            title: '系统提示',
            message: '请先登录',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          })
            .then(() => {
              this.$router.push({ path: '/check' });
            })
            .catch(() => {});
          return;
        }
      }
      if (link == '/items/members-zone/1') {
        if (this.userInfo != 1) {
          Dialog.confirm({
            title: '系统提示',
            message: '请先开通金牌会员',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          })
            .then(() => {
              if (this.mobile == '' || this.mobile == undefined) {
                Dialog.confirm({
                  title: '系统提示',
                  message: '请先登录',
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                })
                  .then(() => {
                    this.$router.push({ path: '/check' });
                  })
                  .catch(() => {});
                return;
              }
              this.pay(2);
            })
            .catch(() => {});
        } else {
          this.$router.push({ path: link });
        }
      } else {
        this.$router.push({ path: link });
      }
    },
    // 支付
    pay(type) {
      if (typeof WeixinJSBridge == 'undefined') {
        if (document.addEventListener) {
          document.addEventListener(
            'WeixinJSBridgeReady',
            onBridgeReady1,
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady1);
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady1);
        }
      } else {
        this.onBridgeReady1();
      }
    },
    onBridgeReady1() {
      getOrderSign({
        orderId: 1181170,
      }).then((res) => {
        let that = this;

        that.orderSn = res.data.data.orderSn;

        const Mfbank = JSON.parse(res.data.data.info.wcPayData);

        WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          {
            appId: Mfbank.appId, //公众号名称，由商户传入
            timeStamp: Mfbank.timeStamp, //时间戳，自1970年以来的秒数
            nonceStr: Mfbank.nonceStr, //随机串
            package: Mfbank.package,
            signType: Mfbank.signType, //微信签名方式：
            paySign: Mfbank.paySign, //微信签名
          },
          function (res) {
            if (res.err_msg == 'get_brand_wcpay_request:ok') {
              //跳转到开通会员接口
              setTenCardOnline({
                orderSn: that.orderSn,
                goodId: 1181170,
              }).then((res) => {
                let status = 0;
                if (res.data.errmsg == '成功') {
                  status = 1;
                }
                that.$router.push({
                  name: 'paymentVipStatus',
                  query: {
                    status: status,
                  },
                });
              });
            }
          }
        );
      });
    },

    async getDataListMap() {
      await adListMap({
        positions: '24, 34, 25, 26, 27, 28, 29, 30, 31, 32, 33',
      })
        .then((res) => {
          this.lists = res.data.data.list;
        })
        .then((_) => {
          //默认选中第一个
          // this.onChange(0);
        });
    },

    itemClick(id) {
      this.$router.push(`contract/detail?id=${id}`);
    },
    workTo(id) {
      this.$router.push(`/info/workers-detail/${id}`);
    },

    async gethomebtn() {
      await gethomebuton({
        userId: Number(this.userId),
        time: new Date(),
        mode: 12,
      })
        .then((res) => {
          this.newhome = res.data.data;
        })
        .catch((err) => {});

      await gethomebuton({
        userId: Number(this.userId),
        mode: 13,
        time: new Date(),
      })
        .then((res) => {
          this.consulting = res.data.data;
        })
        .catch((err) => {});
      await gethomebuton({
        userId: Number(this.userId),
        mode: 14,
        time: new Date(),
      })
        .then((res) => {
          this.painting = res.data.data;
        })
        .catch((err) => {});
      await gethomebuton({
        userId: Number(this.userId),
        mode: 15,
        time: new Date(),
      })
        .then((res) => {
          this.interaction = res.data.data;
        })
        .catch((err) => {});
      await gethomebuton({
        userId: Number(this.userId),
        mode: 16,
        time: new Date(),
      })
        .then((res) => {
          this.broadcast = res.data.data;
        })
        .catch((err) => {});
      await gethomebuton({
        userId: Number(this.userId),
        mode: 23,
        time: new Date(),
      })
        .then((res) => {
          this.longx = res.data.data;
        })
        .catch((err) => {});
      await gethomebuton({
        userId: Number(this.userId),
        mode: 24,
        time: new Date(),
      })
        .then((res) => {
          let imga = res.data.data;
          imga.forEach((element) => {
            this.tabtitle.push(element.image);
          });
        })
        .catch((err) => {});
    },

    async getCategoryDataList() {
      this.category.page++;
      await adList(this.category)
        .then((res) => {
          this.categoryDataList.push(...res.data.data.list);
          this.loading = false;
          this.finished = res.data.data.page >= res.data.data.pages;
        })
        .catch((e) => {
          this.page--;
          this.loading = false;
          this.finished = true;
        });
    },

    // 租赁专区 跳转商铺内详情事件
    itemClickRent(id) {
      this.$router.push(`/info/rent-detail/${id}`);
    },
    // 工程专区详情信息跳转页面
    itemProjectClick(id) {
      // Toast(id);
      this.$router.push(`/info/project-detail/${id}`);
    },

    itemTeamClick(id) {
      this.$router.push(`/info/workers-detail/${id}`);
    },
    // 获得招商加盟租赁专区下的图片
    getMerchantsUrl() {
      adList({
        position: 22,
      })
        .then((res) => {
          this.merchantsUrl = res.data.data.list[0].url || logo_default;
        })
        .catch((err) => {});
    },

    // async initNewLevelOption() {
    //   await dicItems({
    //     groupId: this.newLevelId,
    //   })
    //     .then((res) => {
    //       let list = res.data.data.list;
    //       for (let i in list) {
    //         let opiton = {
    //           text: list[i].itemName,
    //           value: parseInt(list[i].itemValue),
    //         };
    //         this.leveloptions.push(opiton);
    //       }
    //     })
    //     .catch(() => {});
    // },
    isNotEmpty(img) {
      if (img == undefined || img == null || img == '') {
        return false;
      } else {
        return true;
      }
    },
    redirectTo(link) {
      if (link == null || link == '' || link == undefined) {
        return;
      }
      if (link.indexOf('http') != -1) {
        window.location.href = link;
        return;
      }
      if (link.indexOf('weixin') != -1) {
        window.location.href = link;
        return;
      }
      this.$router.push({
        path: link,
      });
    },
    getSrc(item) {
      let image = logo_default;
      if (item.images.length != 0) {
        image = item.images[0];
      }
      return image;
    },

    // 首页轮播
    initViews() {
      getHome({}).then((res) => {
        this.shopInfos = res.data.data;
        //二手买卖
        this.usedLinkOne =
          this.shopInfos.usedList[0] && this.shopInfos.usedList[0].link
            ? this.shopInfos.usedList[0].link
            : '';
        this.usedSrcPriceOne =
          this.shopInfos.usedList[0] && this.shopInfos.usedList[0].name
            ? this.shopInfos.usedList[0].name
            : '未知';
        this.usedPriceOne =
          this.shopInfos.usedList[0] && this.shopInfos.usedList[0].content
            ? this.shopInfos.usedList[0].content
            : '面议';
        this.usedImgOne =
          this.shopInfos.usedList[0] && this.shopInfos.usedList[0].url
            ? this.shopInfos.usedList[0].url
            : logo_default;
        this.usedLinkTwo =
          this.shopInfos.usedList[1] && this.shopInfos.usedList[1].link
            ? this.shopInfos.usedList[1].link
            : '';
        this.usedSrcPriceTwo =
          this.shopInfos.usedList[1] && this.shopInfos.usedList[1].name
            ? this.shopInfos.usedList[1].name
            : '未知';
        this.usedPriceTwo =
          this.shopInfos.usedList[1] && this.shopInfos.usedList[1].content
            ? this.shopInfos.usedList[1].content
            : '面议';
        this.usedImgTwo =
          this.shopInfos.usedList[1] && this.shopInfos.usedList[1].url
            ? this.shopInfos.usedList[1].url
            : logo_default;
        this.usedLinkThree =
          this.shopInfos.usedList[2] && this.shopInfos.usedList[2].link
            ? this.shopInfos.usedList[2].link
            : '';
        this.usedSrcPriceThree =
          this.shopInfos.usedList[2] && this.shopInfos.usedList[2].name
            ? this.shopInfos.usedList[2].name
            : '未知';
        this.usedPriceThree =
          this.shopInfos.usedList[2] && this.shopInfos.usedList[2].content
            ? this.shopInfos.usedList[2].content
            : '面议';
        this.usedImgThree =
          this.shopInfos.usedList[2] && this.shopInfos.usedList[2].url
            ? this.shopInfos.usedList[2].url
            : logo_default;
        //热租好物
        this.rentLinkOne =
          this.shopInfos.rentList[0] && this.shopInfos.rentList[0].link
            ? this.shopInfos.rentList[0].link
            : '';
        this.rentImgOne =
          this.shopInfos.rentList[0] && this.shopInfos.rentList[0].url
            ? this.shopInfos.rentList[0].url
            : logo_default;
        this.rentLinkTwo =
          this.shopInfos.rentList[1] && this.shopInfos.rentList[1].link
            ? this.shopInfos.rentList[1].link
            : '';
        this.rentImgTwo =
          this.shopInfos.rentList[1] && this.shopInfos.rentList[1].url
            ? this.shopInfos.rentList[1].url
            : logo_default;
        //工程发包
        this.projectLinkOne =
          this.shopInfos.projectList[0] && this.shopInfos.projectList[0].link
            ? this.shopInfos.projectList[0].link
            : '';
        this.projectImgOne =
          this.shopInfos.projectList[0] && this.shopInfos.projectList[0].url
            ? this.shopInfos.projectList[0].url
            : logo_default;
        this.projectLinkTwo =
          this.shopInfos.projectList[1] && this.shopInfos.projectList[1].link
            ? this.shopInfos.projectList[1].link
            : '';
        this.projectImgTwo =
          this.shopInfos.projectList[1] && this.shopInfos.projectList[1].url
            ? this.shopInfos.projectList[1].url
            : logo_default;
        //新品首发
        this.newGoodsLinkOne =
          this.shopInfos.newList[0] && this.shopInfos.newList[0].link
            ? this.shopInfos.newList[0].link
            : '';
        this.newGoodsImgOne =
          this.shopInfos.newList[0] && this.shopInfos.newList[0].url
            ? this.shopInfos.newList[0].url
            : logo_default;
        this.newGoodsLinkTwo =
          this.shopInfos.newList[1] && this.shopInfos.newList[1].link
            ? this.shopInfos.newList[1].link
            : '';
        this.newGoodsImgTwo =
          this.shopInfos.newList[1] && this.shopInfos.newList[1].url
            ? this.shopInfos.newList[1].url
            : logo_default;
        //施工队伍
        this.workTeamLinkOne =
          this.shopInfos.workTeamList[0] && this.shopInfos.workTeamList[0].link
            ? this.shopInfos.workTeamList[0].link
            : '';
        this.workTeamImgOne =
          this.shopInfos.workTeamList[0] && this.shopInfos.workTeamList[0].url
            ? this.shopInfos.workTeamList[0].url
            : logo_default;
        this.workTeamLinkTwo =
          this.shopInfos.workTeamList[1] && this.shopInfos.workTeamList[1].link
            ? this.shopInfos.workTeamList[1].link
            : '';
        this.workTeamImgTwo =
          this.shopInfos.workTeamList[1] && this.shopInfos.workTeamList[1].url
            ? this.shopInfos.workTeamList[1].url
            : logo_default;
        //好物种草
        this.hotGoodsLinkOne =
          this.shopInfos.hotList[0] && this.shopInfos.hotList[0].link
            ? this.shopInfos.hotList[0].link
            : '';
        this.hotGoodsImgOne =
          this.shopInfos.hotList[0] && this.shopInfos.hotList[0].url
            ? this.shopInfos.hotList[0].url
            : logo_default;
        this.hotGoodsLinkTwo =
          this.shopInfos.hotList[1] && this.shopInfos.hotList[1].link
            ? this.shopInfos.hotList[1].link
            : '';
        this.hotGoodsImgTwo =
          this.shopInfos.hotList[1] && this.shopInfos.hotList[1].url
            ? this.shopInfos.hotList[1].url
            : logo_default;
      });

      //每分钟刷新一次
      if (this.Interval) {
        window.clearInterval(this.Interval);
      }
      this.Interval = setInterval(() => {
        //this.HandleIsHavePlaying()
      }, 1000 * 60);
    },
  },
  computed: {
    sideBarListWrap() {
      this.sideBarList.map((el) => {
        if (el.length >= 5) {
          // :class="item.length>=5? '': wrpaList"
          var str2 = el.substring(3, this.name.length);
          var str1 = this.name.substring(0, 3);
          el = str1 + '<br>' + str2;
        }
      });
    },
  },
  components: {
    BaiduMap,
    [Row.name]: Row,
    [Col.name]: Col,
    [Card.name]: Card,
    [Toast.name]: Toast,
    [Search.name]: Search,
    [List.name]: List,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Tag.name]: Tag,
    [Image.name]: Image,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Divider.name]: Divider,
    [Panel.name]: Panel,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Sidebar.name]: Sidebar,
    [SidebarItem.name]: SidebarItem,
    [Dialog.Component.name]: Dialog.Component,
  },
};
</script>

<style lang="scss" scoped>
body {
  overflow: hidden;
}
/deep/.van-icon__image {
  height: auto;
}
.function {
  background-color: #fff;
  // margin: 0 4%;
  border-radius: 6px;

  div {
    text-align: center;

    span {
      font-size: 14px;
    }
  }
}

// 小标签

.marle {
  margin-left: 3px;
  border-radius: 2px !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
  color: white !important;
  // background: white !important;
  letter-spacing: 1px;
}

.tag {
  border-radius: 2px !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
  color: white !important;
  // background: white !important;
  letter-spacing: 1px;
}
.marlet {
  margin-left: 3px;
  border-radius: 2px !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
  color: #1d5ae8 !important;
  // background: white !important;
  letter-spacing: 1px;
}

.tagt {
  border-radius: 2px !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
  color: #1d5ae8 !important;
  // background: white !important;
  letter-spacing: 1px;
}

.vansidebar {
  width: 100%;
  text-align: center;
  padding: 1.5rem 0;
}

.minden {
  position: relative;
}

.vansidebarhei {
  color: #1d5ae8;
  border-right: 2px solid #1d5ae8;
  font-weight: 650;
  text-align: center;
  padding: 1.5rem 0;
}

.vansidebarhei {
  background: white;
  transition: 0.5s;
}

.vansidebarlist {
  float: left;
  width: 20%;
  height: 100%;
  background: rgb(231, 230, 230);
  overflow: scroll;
}

.vansidebarlist::-webkit-scrollbar {
  opacity: 0;
  display: none;
}

.side_scroll {
  height: auto !important;
  overflow: scroll;
}

// .van-sidebar {
//   width: 20% !important;
// }
.van-sidebar {
  height: 55.5vh !important;
}

.van-list {
  height: auto !important;
}

.iconSty {
  margin: 0 !important;
  padding-left: 5px;
  background: #ffffff;
}

.engineering_content_pos {
  width: 100px;
  height: 100px;
  // border-radius: 4px;
  //padding-bottom: 100%;
  background-size: 100% 100%;
  position: relative;
  //margin-top: 0.5rem;
  font-size: 14px;

  span {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
    height: 1.1rem;
    height: 1.1rem;
    font-size: 0.8rem;
    // opacity: 0.5;
    color: #fff;
    background-color: rgba(121, 171, 247, 0.79);
  }
}

.tab_home {
  background-color: #f2f1f6;
}

.little_small {
  overflow: hidden;
  border-radius: 0.5rem;
  margin: 0 0.75rem;
  font-size: 14px;
  //box-shadow: 0px 0px 0.5rem #c3c3c3;
}

// 导航分类区
.navigate_z {
  // height: 360px;
  background-color: #fff;
  border-radius: 0.5rem;

  .navigate_content_big {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 1.7rem 0 1rem 0;

    .navigate_content {
      width: 33.333333%;
      height: 6.75rem;
      padding: 0 0.5rem;
      margin-bottom: 0.7rem;
    }
  }
}

.titall {
  width: 100%;

  .titlering {
    display: flex;
    background: #f2f1f6;
    width: 100%;
    height: 2.5rem;
    // border-bottom: 1px solid #69686831;
    justify-content: space-between;
    align-items: center;

    div:nth-child(1) {
      margin-left: 0.85rem;
      font-weight: 600;
      font-size: 16px;
    }

    // div:nth-child(1)::before {

    // }
  }
}

// 具体工程区

// 滚动条隐藏属性
.sroldiv::-webkit-scrollbar {
  opacity: 0.1;
}

/deep/.engineering_z {
  display: flex;
  width: auto;
  padding: 0 3px;
  // calc是长宽度自动计算属性，支持计算符号，但记得需要加空格
  // width: calc(300% - 2.75rem);

  .engineering {
    div:nth-child(1) {
      font-size: 0.9rem;
      margin-left: 0.5rem;
      font-weight: 700;
    }

    div:nth-child(2) {
      align-items: center;
      margin-right: 0.5rem;

      span:nth-child(1) {
        height: 1rem;
        line-height: 1rem;
        margin-right: 0.1rem;
        font-size: 0.7rem;
        color: #a6a4a4;
      }
    }
  }

  .engineering_content {
    width: 33%;
    // display: flex;
    height: 163px;
    float: left;
    // box-shadow: 0 0 1px 1px rgba(90, 90, 90, 0.192),
    //   -2px 2px 2px rgba(90, 90, 90, 0.192);
    padding: 5px;
    background-color: #fff;
    // margin-left: 0.6rem;
    border-radius: 4px;

    .engineering_wenzi {
      // display: flex;
      // flex-direction: column;
      // justify-content: space-between;
      height: 155px;
      width: 100px;
      display: flex;
      flex-direction: column;

      // padding-left: 10px;
      div:nth-child(2) {
        height: auto;
        max-height: 55px;
        overflow: hidden;
        margin-top: 10px;
        text-align: left;
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;

        .title_zushou {
          width: 100%;
          font-size: 0.8rem;
          //margin-top: 0.9rem;
          //font-weight: 700;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }

        .detail_zushou {
          width: 100%;
          margin: 0.4rem 0;
          font-size: 0.7rem;
          color: rgba(166, 164, 164, 1);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }

        .title1,
        .title2 {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        .title2 {
          font-size: 12px;
          color: #7e7b7b;
        }
      }
    }
  }
}

.gengduo_se {
  justify-content: center;
  text-align: center;
  // display: flex;
  // align-items: center;
  font-size: 0.75rem;

  margin: 0.5rem auto;
  width: 60%;
  padding: 2% 1%;
  border-radius: 5px;
  color: white;
  font-weight: 600;
  height: auto;
  background: #f94804;
}

.gengduo {
  text-align: center;
  // display: flex;
  // align-items: center;
  font-size: 0.75rem;
  margin: 0.5rem auto;
  width: 60%;
  padding: 2% 1%;
  border-radius: 5px;
  color: white;
  font-weight: 600;
  height: auto;
  background: #f94804;
}

.gengduo::after {
  // content: '';
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  color: white;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: rotate(45deg);
}

//  广告位置，热点图片
.hot_info {
  margin-top: 1rem;
  width: 100%;
  height: 10.15rem;
}

.shadow {
  overflow: hidden;
  border-radius: 0.5rem;
  // box-shadow: 0 0 0.5rem #c3c3c3;
}

// 租售专区标题
.rentitle {
  margin-top: 1rem;
  width: 100%;
  font-size: 0.9rem;
  margin-left: 0.5rem;
  font-weight: 700;
}

.rentitle div::before {
  // display: inline-block;
  content: '▍';
  color: red;
  padding-right: 0.3rem;
}

.box_bottom {
  width: 100%;
  padding: 0 0.8rem;
  margin-bottom: 1rem;

  // 租售专区
  .rental_z {
    width: 100%;
    background-color: #fff;

    .rental_title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // width: calc(100% - 10px);
      width: 100%;
      height: 2.25rem;
      // border-bottom: 1px solid #eee;

      div:nth-child(1) {
        // width: 75px;
        font-size: 0.88rem;
        // margin-left: 0.5rem;
        font-weight: 700;
      }

      div:nth-child(2) {
        display: flex;
        align-items: center;
        // margin-right: 0.5rem;

        span:nth-child(1) {
          height: 1rem;
          line-height: 1rem;
          margin-right: 0.1rem;
          font-size: 0.7rem;
          color: rgba(166, 164, 164, 1);
        }
      }
    }

    .rental_cen {
      // display: flex;
      flex-direction: row;
      // align-items: center;
      // padding: 0 0.5rem;
      width: 100%;

      .rental_content {
        display: flex;
        flex-direction: column;
        width: 46%;
        margin: 1rem 0;
        padding: 0.5rem;
        // margin-left: 1rem;
        border-radius: 10px;
        box-shadow: 0px 0px 8px rgba(20, 20, 20, 0.236);
        // height: 70px;
        // .van-col:nth-child(1) {
        //   // display: flex;
        //   // flex-direction: column;
        //   // .van-image {
        //   //   overflow: hidden;
        //   //   border-radius: 50%;
        //   // height: auto;
        // }

        .rental_right {
          display: flex;
          align-items: center;
          width: 100%;

          p {
            display: -webkit-box;
            margin: 1rem 0;
            overflow: hidden;
            text-align: center;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }

          // .van-col:nth-child(1) {
          //   // div:nth-child(1) {
          //   //   height: 1.5rem;
          //   //   margin-left: 0.6rem;
          //   //   line-height: 1.5rem;
          //   //   font-size: 0.8rem;
          //   //   text-align: left;
          //   //   overflow: hidden;
          //   //   text-overflow: ellipsis;
          //   //   white-space: nowrap;
          //   // }

          //   // div:nth-child(2) {
          //   //   margin-left: 0.6rem;
          //   //   height: 1.2rem;
          //   //   line-height: 1.2rem;
          //   //   font-size: 0.7rem;
          //   //   color: #a6a4a4;
          //   //   overflow: hidden;
          //   //   text-overflow: ellipsis;
          //   //   white-space: nowrap;
          //   //   text-align: left;
          //   // }
          // }

          // .van-col:nth-child(2) {
          //   display: flex;
          //   justify-content: center;
          //   align-items: center;

          //   div {
          //     width: 4.4rem;
          //     height: 1.5rem;
          //     line-height: 1.5rem;
          //     //text-align: center;
          //     border: 1px solid #bbbbbb;
          //     border-radius: 0.75rem;
          //     font-size: 0.65rem;
          //   }
          // }
        }
      }
    }
  }

  .rental_bot {
    width: 100%;
    height: 1.1rem;
    background-color: #fff;
    border-top: 1px solid #eee;
    border-radius: 0 0 0.5rem 0.5rem;
  }

  .video_class {
    margin-top: 1rem;

    .video_tit {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 1.75rem;

      span:nth-child(1) {
        display: flex;
        align-items: center;
        font-weight: 700;
        font-size: 1rem;
      }

      span:nth-child(1)::before {
        content: '';
        display: inline-block;
        margin-right: 0.4rem;
        width: 0.4rem;
        height: 1.3rem;
        background-color: #f77d52;
      }

      span:nth-child(2) {
        font-size: 0.7rem;
        color: #a6a4a4;
        padding-right: 0.1rem;
      }

      span:nth-child(2)::after {
        content: '';
        display: inline-block;
        width: 0.35rem;
        height: 0.35rem;
        border-top: 0.1rem solid #a6a4a4;
        border-right: 0.1rem solid #a6a4a4;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
      }
    }

    .video_cont {
      margin-top: 1rem;

      .van-col {
        border-radius: 0.5rem;
        overflow: hidden;
        height: 13.1rem;

        div:nth-child(1) {
          width: 100%;
          height: 11.3rem;
          background-color: #fff;
        }

        div:nth-child(2) {
          overflow: hidden; //超出部分隐藏
          text-overflow: ellipsis; //超出部分显示...
          white-space: nowrap; //文本强制一行显示
          width: 100%;
          height: calc(100% - 11.3rem);
          // line-height: calc(100% - 226px);
          font-size: 0.8rem;
          padding: 0.3rem;
        }
      }
    }
  }
}

/deep/.van-field__control[type='search'] {
  height: 1rem;
  // line-height: 2.1rem;
  font-size: 14px;
}

.van-cell__value--alone {
  height: 1.1rem;
}

.clear {
  clear: both;
}

//banner下小标题导航
.little-navigate {
  text-align: center;
  padding: 0 0 1rem 0;
  //background-color: #fff;

  img {
    width: 3rem;
    height: 3rem;
  }

  span {
    display: inline-block;
    width: 100%;
    //float: left;
    padding-top: 0.15rem;
  }
}

// 畅销榜
.sellwell {
  width: 100%;
  margin: 0.6rem 0;

  .left {
    position: relative;
    float: left;
    width: 30%;
    padding-bottom: 25.2%;
    background: #ee3f00;
    border-radius: 0.5rem;
    margin-left: 4%;

    .img {
      position: absolute;
      top: 3%;
      height: 94%;
      left: 2%;
      width: 96%;
      border-radius: 0.5rem;
      background-size: 100% 100%;
    }
  }

  .piece {
    float: left;
    width: 2%;
    padding-bottom: calc(25.2% - 0.95rem);
    background: #ee3f00;
    margin-top: 0.475rem;
  }

  .middle {
    float: left;
    width: 28%;
    padding-bottom: 25.2%;
    //background:#FF7441;
    border-radius: 0.5rem;
    position: relative;

    .top {
      font-size: 0.9rem;
      color: #fff;
      position: absolute;
      top: 1.2rem;
      font-weight: bold;
      left: calc(50% - 1.5em);
    }

    .bottom {
      font-size: 0.7rem;
      color: #101010;
      background: #fff;
      position: absolute;
      bottom: 1.2rem;
      left: calc(50% - 2em - 0.5rem);
      border-radius: 1rem;
      padding: 0 0.5rem;
    }
  }

  .right {
    // position: relative;
    // float: left;
    // width: 30%;
    padding-bottom: 25.2%;
    background: #ee3f00;
    border-radius: 0.5rem;

    .img {
      position: absolute;
      top: 3%;
      height: 94%;
      left: 2%;
      width: 96%;
      border-radius: 0.5rem;
      background-size: 100% 100%;
    }
  }
}

//信息中心
.info-center {
  border-radius: 0.5rem;
  background-color: #fff;
  margin: 0 0.75rem;
  padding: 0.5rem 0 1rem 0;

  .top {
    .used {
      .title {
        .main {
          font-size: 0.8rem;
          color: #101010;
          font-weight: bold;
          height: 1.1rem;
          line-height: 1.1rem;
        }

        .more {
          font-size: 0.6rem;
          border: 1px solid #ff2b21;
          border-radius: 0.7rem;
          height: 1rem;
          line-height: 1rem;
          display: inline-block;
          padding: 0 0.15rem 0 0;

          .left {
            padding: 0 0.25rem;
            height: calc(1rem - 0.1rem);
            line-height: calc(1rem - 0.1rem);
            display: inline-block;
            background-color: #ff2b21;
            color: #fff;
            border-radius: 0.7rem;
            text-align: center;
            padding: 1px 0.3rem;
          }

          .right {
            text-align: center;
            color: #ff2b21;
            font-weight: 400;
          }
        }
      }

      .content {
        text-align: center;
        margin-top: calc(0.6rem + 0.15rem);

        .img {
          background-size: 100% 100%;
          width: 96%;
          padding-bottom: 96%;
          margin: 0 auto;
        }

        span {
          display: inline-block;
          width: 100%;
          //float: left;
          font-size: 0.6rem;
        }

        .price {
          margin-top: 0.1rem;
          font-weight: bold;
          color: #000;
        }

        .srcPrice {
          margin-top: 1px;
          font-size: 0.5rem;
          color: #9f9f9d;
          text-decoration: line-through;
        }
      }
    }

    .rent {
      .title {
        .main {
          font-size: 0.8rem;
          color: #101010;
          height: 1.1rem;
          line-height: 1.1rem;
        }

        .more {
          height: 1rem;
          line-height: 1rem;
          display: inline-block;
          padding: 0 0.15rem 0 0.35rem;
          font-size: 0.6rem;
          border: 1px solid #92f396;
          border-radius: 0.7rem;
          text-align: center;

          .word {
            background-image: -webkit-linear-gradient(left, #92f396, #44cbec);
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }

          .arrow {
            color: #44cbec;
          }
        }
      }

      .titletwo {
        background-image: -webkit-linear-gradient(left, #92f396, #44cbec);
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 0.6rem;
        padding: 0.1rem 0 0.2rem 0;
      }

      .Img {
        background-size: 100% 100%;
        width: 100%;
        padding-bottom: 100%;
      }
    }
  }

  .middle {
    margin-top: 1.4rem;

    .project {
      .title {
        .main {
          font-size: 0.8rem;
          color: #101010;
          height: 1.1rem;
          line-height: 1.1rem;
        }

        .more {
          height: 1rem;
          line-height: 1rem;
          display: inline-block;
          padding: 0 0.15rem 0 0.35rem;
          font-size: 0.6rem;
          border: 1px solid #f46c25;
          border-radius: 0.7rem;
          text-align: center;
          color: #f46c25;
        }
      }

      .titletwo {
        color: #f46c25;
        font-size: 0.6rem;
        padding: 0.1rem 0 0.2rem 0;
      }

      .Img {
        background-size: 100% 100%;
        width: 100%;
        padding-bottom: 100%;
      }
    }

    .new {
      .title {
        .main {
          font-size: 0.8rem;
          color: #101010;
          height: 1.1rem;
          line-height: 1.1rem;
          font-weight: bold;
        }

        .more {
          height: 1rem;
          line-height: 1rem;
          display: inline-block;
          padding: 0 0.15rem 0 0.35rem;
          font-size: 0.6rem;
          color: #f84c3f;
          border: 1px solid #fb43b4;
          border-radius: 0.7rem;
          text-align: center;

          span {
            background-image: -webkit-linear-gradient(left, #fb43b4, #f84c3f);
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }

      .second_title {
        font-size: 0.6rem;
        padding: 0.1rem 0 0.2rem 0;

        .main {
          background-image: -webkit-linear-gradient(left, #4c23fb, #639df4);
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .more {
          display: inline-block;
          background-image: -webkit-linear-gradient(left, #ff3da3, #f84c3f);
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .Img {
        background-size: 100% 100%;
        width: 100%;
        padding-bottom: 100%;
      }
    }
  }

  .bottom {
    margin-top: 1.4rem;

    .workers {
      .title {
        .main {
          font-size: 0.8rem;
          color: #101010;
          height: 1.1rem;
          line-height: 1.1rem;
        }

        .more {
          height: 1rem;
          line-height: 1rem;
          display: inline-block;
          padding: 0 0.15rem 0 0.35rem;
          font-size: 0.6rem;
          color: #7839f2;
          border: 1px solid #7839f2;
          border-radius: 0.7rem;
          text-align: center;
        }
      }

      .titletwo {
        color: #7839f2;
        font-size: 0.6rem;
        padding: 0.1rem 0 0.2rem 0;
      }

      .Img {
        background-size: 100% 100%;
        width: 100%;
        padding-bottom: 100%;
      }
    }

    .hot {
      .title {
        .main {
          font-size: 0.8rem;
          color: #101010;
          height: 1.1rem;
          line-height: 1.1rem;
          font-weight: bold;
        }

        .more {
          height: 1rem;
          line-height: 1rem;
          display: inline-block;
          padding: 0 0.15rem 0 0.35rem;
          font-size: 0.6rem;
          border: 1px solid #4c86ea;
          color: #1821cd;
          border-radius: 0.7rem;
          text-align: center;

          span {
            background-image: -webkit-linear-gradient(left, #4c86ea, #1821cd);
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }

      .second_title {
        font-size: 0.6rem;
        padding: 0.1rem 0 0.2rem 0;

        .main {
          background-image: -webkit-linear-gradient(left, #92f396, #44cbec);
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .more {
          background-image: -webkit-linear-gradient(
            left,
            #ff3da3,
            #ff3da3,
            #ff3da3,
            #f84c3f
          );
          background-clip: text;
          -webkit-text-fill-color: transparent;
          display: inline-block;
        }
      }

      .Img {
        background-size: 100% 100%;
        width: 100%;
        padding-bottom: 100%;
      }
    }
  }
}

// @media screen and (max-width: 320px) {
//   .tapchose {
//     /deep/.van-swipe__indicators {
//       bottom: 30px;
//     }
//   }
// }

.tapchose {
  /deep/.van-swipe__indicators {
    bottom: 7px;
  }
  /deep/.van-swipe__track {
    height: auto;
  }

  /deep/.van-swipe__indicator {
    background-color: #1d5ae8;
  }
}

.banner {
  /deep/.van-swipe__indicator {
    background-color: #1d5ae8;
  }
}

.hot_cont_top {
  display: flex;
  top: -3px;
  align-items: center;
  position: absolute;
  z-index: 3;
  padding-left: 0.5rem;
  width: 80%;
  background: #f2f1f6;
  right: 0;
  height: 55px;

  img {
    width: 20%;
  }

  span {
    font-size: 14px;
    font-weight: 700;
  }
}

.hot_cont {
  display: flex;
  width: 100%;
  margin-bottom: 1.25rem;

  .hot_cont_rig {
    width: 100%;
    padding-left: 0.5rem;
    padding-right: 0.7rem;

    .cont1 {
      font-weight: 700;
      font-size: 0.75rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    .cont2 {
      font-size: 0.6rem;
      color: rgba(166, 164, 164, 1);
      margin-top: 0.15rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .cont3 {
      // margin-top: 7px;
      span {
        color: rgb(29, 90, 232);

        .van-tag:nth-of-type(n + 1) {
          font-size: 10px !important;
          margin: 0.35rem 0.4rem 0 0;
          padding-top: 0.1rem;
        }
      }
    }

    .cont4 {
      margin-top: 0.2rem;
      font-size: 0.8rem;
      font-weight: 700;
      color: rgba(247, 7, 7, 1);
    }

    .cont5 {
      display: flex;
      align-items: center;
      margin-top: 1px;
      font-size: 0.8rem;
      font-weight: 700;

      img {
        margin-left: 0.3rem;
        width: 2.4rem;
        height: 0.8rem;
      }
    }
  }
}

.van-sidebar {
  width: 100%;
  height: 100%;
  background-color: #efeff0;
}

.van-image {
  vertical-align: bottom;
}

/deep/ .van-sidebar-item {
  display: block;
  box-sizing: border-box;
  padding: 1.75rem 0 1.75rem 0px;
  // height: 100%;
  overflow: hidden;
  color: #323233;
  font-size: 0.7rem;
  word-wrap: break-word;
  background-color: #efeff0;
  border-left: 0px solid transparent;
  -webkit-user-select: none;
  user-select: none;
  text-align: center;
}

/deep/ .van-sidebar-item__text {
  width: 100%;
  padding: 0 0.15rem;
  // width: calc(100% - 16px);
}

.van-sidebar-item--select {
  display: flex;
  align-items: center;
  // padding: 0 0 0 16px !important;
  word-wrap: break-word;
  height: 3.5rem;
  color: #323233;
  font-weight: 700;
  background-color: #fff;
  text-align: center;
}

/deep/ .van-list__finished-text {
  height: 1px;
  margin: 1rem 3.5rem 1rem 3.5rem;
  border: 0.02px solid #e8e8e8;
}

.van-search {
  padding: 0.75rem 4%;
}

.van-search .van-cell {
  line-height: 1rem;
  font-size: 0.5rem;
  padding: 0 10px;
  padding-top: 0.26rem;
  padding-bottom: 0.1rem;
  background: #ffffff;
}

.banner {
  text-align: center;
}

.banner .topback {
  // background: #ee3f00;
  padding-bottom: 20%;
  width: 100%;
}

.banner .bottomback {
  padding-bottom: 22%;
  width: 100%;
}

.banner img {
  position: absolute;
  top: 0;
  left: 0.01%;
  width: 100%;
  // border-radius: 0.5rem;
}

/deep/.van-swipe__indicators {
  bottom: 11%;
}

/deep/ .goodscategory {
  margin: 0 0.75rem;

  .goods_name {
    padding-left: 0.3rem;
    font-size: 0.65rem;
    height: 1.25rem;
    line-height: 1.5rem;
    font-weight: bold;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: left;
    position: relative;
    color: #323233;
  }

  .goods_price {
    font-weight: bold;
    padding-left: 0.3rem;
    display: inline-block;
    color: #000;
    height: 0.7rem;
    line-height: 0.7rem;
    text-align: left;
  }

  .get_price {
    color: red;
    padding: 0 0.2rem;
    border: 0.2px solid red;
    border-radius: 0.15rem;
    font-size: 0.5rem;
    display: inline-block;
    margin-left: 0.2rem;
    transform: scale(0.8);
    transform-origin: -0.5rem -0.15rem;
  }

  .couter_price {
    display: inline-block;
    font-size: 0.6rem;
    color: #999;
    transform: scale(0.8);
    transform-origin: 0.5rem -1.25rem;
    padding-left: 0.4rem;
    text-decoration: line-through;
  }

  .card:nth-child(odd) {
    padding: 0.3rem 0.3rem 0.3rem 0px !important;
  }

  .card:nth-child(even) {
    padding: 0.3rem 0px 0.3rem 0.3rem !important;
  }

  .goods:nth-child(odd) {
    padding: 0.3rem 0.3rem 0.3rem 0px !important;
  }

  .goods:nth-child(even) {
    padding: 0.3rem 0px 0.3rem 0.3rem !important;
  }

  .goods:nth-child(odd) .box_shadow {
    box-shadow: 0.1rem 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
  }

  .goods:nth-child(even) .box_shadow {
    box-shadow: -0.1rem 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
  }

  .goods .box_shadow {
    box-shadow: 0 0.2rem 0.4rem 0 rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
  }

  .van-tab {
    padding: 0;
  }

  .van-tabs__nav {
    background-color: transparent;
  }

  .van-tabs__content {
    background-color: #fff;
    border-radius: 0 0 0.5rem 0.5rem;
  }

  .van-tabs--card > .van-tabs__wrap {
    border-radius: 0.5rem 0.5rem 0 0;
    height: 3.25rem;
    padding: 0.5rem 0 0.5rem 0;
    background-color: #fff;
  }

  .van-tabs__nav--card {
    margin: 0;
    height: 2.25rem;
    border: 0;
    padding: 0 0.25rem;
  }

  .van-tabs__nav--card .van-tab {
    border-right: 0;
    line-height: 1.1rem;
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
  }

  .van-tabs__nav--card .van-tab.van-tab--active {
    color: #fd0404 !important;
    background-color: transparent !important;
  }

  .van-tabs__nav--card .van-tab {
    color: #101010;
    background-color: transparent !important;
  }

  .van-tabs__nav--card .van-tab.van-tab--active .second_title {
    font-size: 0.585rem;
    background-color: #ff5b5b;
    color: #fff !important;
    font-weight: bold;
    border-radius: 1.25rem;
    padding: 0 0.3rem;
    height: 1rem;
    line-height: 1.1rem;
  }

  .van-tabs__nav--card .van-tab .second_title {
    color: #9f9d9d;
    font-size: 0.585rem;
    display: inline-block;
  }
}

.van-search__content {
  border-radius: 0px !important;
  // height: 1.5rem;
  background: #dddddd !important;
}

.van-sidebar-item--select::before {
  background-color: #fff;
}

.van-list {
  overflow: scroll;
  height: calc(100vh - 3.5rem);
}

.van-list::-webkit-scrollbar {
  display: none;
}

.side_scroll {
  overflow: scroll;
  height: 100vh;
}

.side_scroll::-webkit-scrollbar {
  display: none;
}

/*改变img为了暂时区分 */
.merchant-one {
  filter: hue-rotate(90deg);
}

.merchant-two {
  filter: invert(100%);
}

.van-search,
.van-search__content {
  background: #f2f1f6 !important;
}

.van-search .van-cell {
  border: 1px solid #1d5ae8;
  border-radius: 0.5px;
  border-radius: 3px;
}

.article {
  background: white;

  //border-radius: 5px;
  > ul {
    margin: 0 0.85rem;
    overflow: hidden;

    > li {
      // padding: 6px 0;
      display: flex;

      > aside.left {
        background-size: 100% 100%;
        width: 80px;
        height: 80px;
        // margin-top: 10px;
        border-radius: 4px;
        background-repeat: no-repeat;
        box-sizing: border-box;
      }

      > ul.right {
        flex: 1;
        width: 77%;
        display: flex;
        flex-direction: column;
        align-content: space-between;
        justify-content: space-between;
        // margin-top: 10px;
        // padding-bottom: 5px;
        padding-left: 15px;

        > li {
          p {
            margin: 0;
          }

          .cont4 {
            // margin-left: 6px;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            display: -moz-box;
            -moz-line-clamp: 2;
            -moz-box-orient: vertical;
            word-wrap: break-word;
            word-break: break-all;
            white-space: normal;

            font-weight: 400;
            color: #7e7b7b;
            // color: red;
          }

          .cont5 {
            margin-bottom: 2px;
            display: flex;
            align-items: center;
            // justify-content: center;
            font-size: 16px;
            font-weight: 600;
            color: #f70707;

            img {
              margin-left: 3px;
              width: 48px;
              height: 16px;
            }
          }

          .re-cont5 {
            height: 100%;
            display: flex;
            align-items: flex-end;
            font-size: 16px;
            font-weight: 600;
            color: #f70707;
          }
        }
      }
    }

    // > li:nth-of-type(1) {
    //   border-bottom: 1px solid #eaeaea;
    // }
    // > li:nth-of-type(2) {
    //   border-bottom: 1px solid #eaeaea;
    // }
    // > li:nth-of-type(3) {
    //   border-bottom: 1px solid #eaeaea;
    // }
  }
}
.bottr {
  border-bottom: 1px solid #eaeaea;
}
</style>
